import { Tree } from 'antd'
import MyMap from './MyMap'
import Style from './index.module.scss'
import areaTreeJson from 'static-geo-atlas/geo-data/administrative-data/area-tree.json' assert { type: 'json' }

const BoundRange = () => {
  const [resultArr, setResultArr] = useState<any[]>([]) //用来放查询出来的结果数组
  const [json, setJson] = useState<any>('') //用来放查询出来的json数据
  const [areaName, setAreaName] = useState<any>('全国') // 用来放选中的地区名称
  const treeData: any = areaTreeJson[0].children // 获取树状数据
  /*
    点击树状图，获取选中的节点的事件
  */
  const onSelect = async (selectedKeys: React.Key[], { node }: any) => {
    if (selectedKeys.length === 0) return
    const url = `/node_modules/static-geo-atlas/geo-data/choropleth-data/${node.level}/${node.adcode}_${node.level}_${node.level}.json`
    // 动态引入数据
    const data = await import(url)

    setJson(data.default)
    const regionArr = data.default.features[0].geometry.coordinates
    console.log(`🌺👉${node.name} 包含${regionArr.length}块==》`)
    setResultArr([]) // 每次查询都清空数组
    setAreaName(node.name)
    for (let index = 0; index < regionArr.length; index++) {
      const item = regionArr[index]
      if (item[0].length === 2) {
        const obj1 = getRange(item)
        setResultArr((prev: any) => [...prev, obj1])
      } else {
        const obj: any = getRange(item[0])
        setResultArr((prev: any) => [...prev, obj])
      }
    }
  }

  /*
   * 将获取到的数组分别进行计算找到经度范围和纬度范围
   * [116.048873, 40.0853] 表示东经 116.048873 和北纬 40.0853 的位置
   */
  const getRange = (arr: any[]) => {
    let minLng: null | number = null // 最小经度
    let maxLng: null | number = null // 最大经度
    let minLat: null | number = null // 最小纬度
    let maxLat: null | number = null // 最大纬度
    arr.forEach((item) => {
      const [l, t] = item
      minLng = minLng === null ? l : Math.min(minLng, l) //找到经度最小值
      maxLng = maxLng === null ? l : Math.max(maxLng, l) //找到经度最大值
      minLat = minLat === null ? t : Math.min(minLat, t) //找到纬度最小值
      maxLat = maxLat === null ? t : Math.max(maxLat, t) //找到纬度最大值
    })
    console.log(
      `最小经度${minLng} 最大经度${maxLng} 最小纬度${minLat} 最大纬度${maxLat}`,
    )
    return {
      minLng,
      maxLng,
      minLat,
      maxLat,
    }
  }

  return (
    <div className={Style.outBox}>
      <div className={Style.treeBox}>
        <Tree
          showLine
          autoExpandParent
          onSelect={onSelect}
          treeData={treeData}
          fieldNames={{ key: 'adcode' }}
        />
      </div>
      <div className={Style.resultBox}>
        <span className={Style.title}>{areaName}</span>
        <MyMap json={json} resultArr={resultArr} />
        <div style={{ overflowY: 'auto', height: '530px' }}>
          {resultArr.map((item, index) => {
            return (
              <div key={index} className={Style.rightItem}>
                <p>第{index + 1}个地区</p>
                <span>
                  经度范围：{item.minLng} - {item.maxLng}
                </span>
                纬度范围：{item.minLat} - {item.maxLat}
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}
export default BoundRange
